<template>
  <div
    v-loading="loading"
    class="RainInfoBox"
    element-loading-text="加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.3)"
  >
    <div class="rainInfo_top">
      <div v-show="ldflg">
        雷达站名：<span>{{ infoRainList.st?infoRainList.st.stnm:'--'  }}</span>
      </div>
      <div v-show="ldflg">
        雷达站址： <span>{{ infoRainList.st?infoRainList.st.stlc:'--' }}</span>
      </div>
       <div v-show="ldflg">
        行政区划：<span>{{ infoRainList.st ?infoRainList.st.fulladdvnm:'--' }}</span>
      </div>
      <div>
        时间段：<span>
          <el-date-picker
            v-model="TimeRainDlg"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 80%"
            format="yyyy-MM-dd HH:mm"
            value-format="yyyy-MM-dd HH:mm"
            :default-time="[timebeg, timebeg]"
            @change="selectTime"
          />
        </span>
      </div>
      <div>
        累计雨量(mm)：<span> {{ infoRainList.maxP || 0 }} </span>
      </div>
      <div class="rainInfo_top_btn_span">
     
        <p class="zhadiobtn">
          <el-radio-group v-model="adioBtnSpan" @change="handleClickRain">
            <el-radio label="">默认</el-radio>
            <el-radio label="3">3天</el-radio>
            <el-radio label="7">7天</el-radio>
            <el-radio label="10">10天</el-radio>
          </el-radio-group>
        </p>
      </div>
    </div>
    <div class="rainInfo_center">
      <el-row class="tableEchatrsdiv">
        <el-col :span="18" class="tableEchatrsdiv">
          <!-- <div class="grid-content bg-purple"> -->
            <div class="demoEccharts">
              <Newecharts id="radarinfoEcharts" style="height:100%" :option="ChartTestData" />
            </div>
          <!-- </div> -->
        </el-col>
        <el-col :span="6" class="tableEchatrsdiv listTables">
          <div class="grid-content bg-purple-light" style="height:100%">
            <el-table :data="tableData" style="width: 100%;height:100%">
              <el-table-column prop="tm" align="center" label="时间" />
              <el-table-column prop="p" align="center" label="时段降雨(mm)" />
            </el-table>
          </div>
        </el-col>
      </el-row>
      <el-row  v-if="ldflg">
        <el-col :span="24">
          <div class="rainLimitWrap">
            <div class="rainFlag">最大<br>雨量<br>(mm)</div>
            <div class="flagTableDiv">
              <div>
                <span
                  v-for="(item, indnx) in listTimeName"
                  :key="indnx"
                  :label="item"
                >{{ item }}</span>
              </div>
              <div>
                <div v-for="(itemChlid, indexC) in rangeMaxDrp" :key="indexC">
                  <span>{{ itemChlid.p }}</span>
                  <span :class="'mainTextLevel' + itemChlid.rank">{{
                    itemChlid.mainText
                  }}</span>
                  <span>{{ itemChlid.tm }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div>
      <el-row class="rainLimitTableWrap" :gutter="1" v-if="ldflg">
        <el-col :span="24">
          <el-table border class="flagTable rainLimitTable" :data="reappearDataLeft" size="mini">
            <el-table-column align="center" prop="title" label="重现期" />
            <el-table-column align="center" prop="m60" label="1小时" />
            <el-table-column align="center" prop="m180" label="3小时" />
            <el-table-column align="center" prop="m360" label="6小时" />
            <el-table-column align="center" prop="m1440" label="24小时" />
            <el-table-column align="center" prop="title_1" label="重现期" />
            <el-table-column align="center" prop="m60_1" label="1小时" />
            <el-table-column align="center" prop="m180_1" label="3小时" />
            <el-table-column align="center" prop="m360_1" label="6小时" />
            <el-table-column align="center" prop="m1440_1" label="24小时" />
          </el-table>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import Newecharts from './newecharts.vue';
import  * as echarts from 'echarts'

import {
    GetRadarRainInfo
} from '@/api/xuna.js'
import moment from 'moment'
export default {
    components: {
        Newecharts
    },
    props: ['selectflg'],
    data() {
        return {
            rainTimeRadio: '60', // 累计雨量参数 选择时间 1小时 3小时 一天
            TimeRainDlg: '',
            parameter: '',
            TimeRain: '',
            adioBtnSpan: '',
            timebeg: this.$moment().format('HH:mm:ss'),
            tableData: [],
            infoRainList: {
                st: {
                    stnm: '',
                    stlc: '',
                    fulladdvnm: '',
                    MaxP: '0'
                }
            },
            rangeMaxDrp: [],
            listTimeName: ['1小时', '3小时', '6小时', '24小时'],
            reappearDataLeft: [],
            ChartTestData: {},
            loading: false,
            timeIntervalRainData: [], // 时段降雨数据
            ldflg:false,

        }
    },
     watch: {
        selectflg: {
            handler(newVal, oldVal) {
                if(Object.keys(this.ChartTestData).length == 0){
                  this.getData()
                }
            },
            deep: true
        },
       
    },
    created() {
        const getRainParmas = this.$store.getters.dlgParams.params
        this.parameter = getRainParmas
        this.TimeRainDlg = [this.parameter.strBegin || this.parameter.rainStart || '', this.parameter.strEnd || this.parameter.rainEnd || '']
        // console.log(this.parameter)
        
    },
    methods: {
        handleClickRain(val) {
            this.adioBtnSpan = val
            if (val !== '') {
                let met =  this.TimeRainDlg[1];
                const timeT = this.$moment(met).subtract(val, 'day').format('YYYY-MM-DD HH:mm')
                this.parameter.strBegin = timeT
                this.selectTime([timeT, met]);
            } else {
                this.getData()
            }
        },
        // 自定义时间
        selectTime(val) {
            if (val) {
                this.parameter.strBegin = val[0]
                this.parameter.strEnd = val[1]
                this.TimeRainDlg = val
                this.getData()
            } else {
                this.parameter.strBegin = ''
                this.parameter.strEnd = ''
            }
        },
        // 根据快速选择时间判断显示值
        rainTimeRadioChange() {
           
          
        },
        // 获取参数
        getData() {
            this.loading = true
            const param = {
                dtBegin: this.parameter.strBegin || this.parameter.rainStart || '2021-06-08',
                dtEnd: this.parameter.strEnd || this.parameter.rainEnd || '2021-06-11',
                Addvcd: this.parameter.Ewcode  || '610122210220000',
            }
            GetRadarRainInfo(param).then((res) => {
                this.loading = false
                if (res.isSuccess) {
                    this.infoRainList = res.data
                    this.tableData = [...res.data.lstRv].map(function(v) {
                        return {
                            p: v.p,
                            // tm: v.tm.replace(/T/g, ' ')
                            tm: moment(v.tm).format('YYYY-MM-DD HH:mm')
                        }
                    })
                    // this.rangeMaxDrp = [...res.data.rangeMaxDrp].map(function(v) {
                    //     return {
                    //         ...v,
                    //         tm: moment(v.tm).format('HH:mm')
                    //     }
                    // })

                    // const arrData = [{
                    //     title: '5年一遇',
                    //     title_1: '50年一遇'
                    // },
                    // {
                    //     title: '10年一遇',
                    //     title_1: '100年一遇'
                    // },
                    // {
                    //     title: '20年一遇',
                    //     title_1: '历史最大值'
                    // }
                    // ]
                    // res.data.lstDr.forEach(function(v, i) {
                    //     const key = 'm' + v.intv
                    //     arrData[0][key] = v.five != null ? Math.round(v.five, 1) : ''
                    //     arrData[1][key] = v.ten != null ? Math.round(v.ten, 1) : ''
                    //     arrData[2][key] = v.twenty != null ? Math.round(v.twenty, 1) : ''
                    //     arrData[0][key + '_1'] = v.fifty != null ? Math.round(v.fifty, 1) : ''
                    //     arrData[1][key + '_1'] = v.hundred != null ? Math.round(v.hundred, 1) : ''
                    //     arrData[2][key + '_1'] = v.maxP ? Math.round(v.maxP, 0) : '/'
                    //     arrData[2]['mxtm'] = v.mxtm ? '(' + moment(v.mxtm).format('yyyyMMdd') + ')'
                    //         : ''
                    // })
                    // this.reappearDataLeft = arrData
                    this.getRainEchart(res.data.lstRv, this.adioBtnSpan)
                    
                }
            }).catch(err=>{
                this.loading = false
            })
        },

        getRainEchart(list, adioBtnSpan) {
            const lst = list
            const ljData = []
            const jyData = []
            const xData = [];
            var jyMax = 0;
            let oldxdt = '';
            lst.map((v, index) => {
                jyData.push(v.p)
                ljData.push(v.sumDrp)
                xData.push(v.tm.replace(/T/g, ' '))
            });
            if (jyData.length > 0) {
                jyMax = Math.max(...jyData);
            }
            let maxwid = jyData.length>20?'':jyData.length>10?'35%':'15%';
            this.ChartTestData = {

                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        crossStyle: {
                            color: '#999'
                        }
                    }
                },
                title: {
                    margin: 0,
                    verticalAlign: 'top',
                    useHTML: true,
                    text: list.length > 0 ? '雨量过程图' : '无数据',
                    x: list.length > 0 ? 20 : 'center',
                    y: list.length > 0 ? 0 : 'center',
                    textStyle: {
                        color: '#fff',
                        fontSize: '12px'
                    }
                },
                grid: {
                    x: 55,
                    y: 55,
                    x2: 45,
                    y2: 35
                },
                legend: {
                    x2: 95,
                    y: 10,
                    data: ['雨量(mm)', '累计雨量(mm)'],
                    textStyle: {
                        fontSize: 12,
                        color: '#fff'
                    }
                },
                xAxis: {
                    interval: 0, // 步长
                    type: 'category',
                    data: xData,
                    axisPointer: {
                        type: 'shadow'
                    },
                    minInterval: 3600 * 1.5 * 1000,
                    axisLabel: {
                        textStyle: {
                            color: function(value, index) {
                                // 判断是否是日 用特殊字体颜色
                                if (value != undefined && value != '' && value != null) {
                                    if (index == 0) {
                                        return '#fff'
                                    } else if (index > 0) {
                                        if (
                                            xData[index - 1].split(' ')[0].split('-')[2] !==
												xData[index].split(' ')[0].split('-')[2]
                                        ) {
                                            return '#fff'
                                        } else {
                                            return '#ddd'
                                        }
                                    }
                                }
                            }
                        },
                        fontSize: 11,
                        //interval: 0, // 步长
                        formatter: function(value, index) {
                            if (value != undefined && value != '' && value != null) {
                                if (index > 0) {
                                   
                                        if (index > 1) {
                                            if(moment(xData[index]).format('DD日')!=oldxdt){
                                                 oldxdt = moment(xData[index]).format('DD日');

                                                return moment(xData[index]).format('DD日')
                                            }else{
                                                oldxdt = moment(xData[index]).format('DD日');
                                                return moment(xData[index]).format('HH:mm')
                                            };
                                         
                                        } else {
                                            oldxdt = moment(xData[index]).format('DD日');
                                            return moment(xData[index]).format('HH:mm')
                                        }
                                   // }
                                } else {
                                    oldxdt = moment(xData[index]).format('DD日');
                                    const dateRetuen = moment(value).format('HH:mm') + '\n' + moment(value)
                                        .format('YYYY-MM-DD')
                                    return dateRetuen
                                }
                            } else {
                                return ''
                            }
                        }
                    }
                },
                yAxis: [{
                    type: 'value',
                    name: '雨量(mm)',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: '#009bd5'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#14275b'
                        }
                    },

                    axisTick: {
                        show: false,
                        lineStyle: {
                            color: 'red'
                        }
                    },
                    axisLabel: {
                        formatter: '{value}',

                    },
                    labels: {
                        align: 'left',
                        x: -8,
                        y: 5,
                        style: {
                            color: '#009bd5'
                        }
                    },
                    min: 0,
                    max: jyMax
                },
                {
                    type: 'value',
                    name: '累计雨量(mm)',
                    nameTextStyle:{
                       color:'#fff'
                    },
                    axisLine: {
                        show: true
                    },
                    axisLabel: {
                        formatter: '{value}',
                         textStyle: {
                            color:'#fff'
                         }
                    },
                    splitLine: {
                        lineStyle: {
                            color: '#14275b'
                        }
                    },
                    labels: {
                        align: 'right',
                        x: -8,
                        y: 5,
                        style: {
                            color: '#bb00ff'
                        }
                    },
                    min: 0,
                    max: ljData[ljData.length - 1]
                }
                ],
                series: [{
                    name: '雨量(mm)',
                    type: 'bar',
                    color: '#009bd5',
                    barCategoryGap: '0%',
                    barMaxWidth:maxwid,
                    itemStyle: {
                        // color: '#3abbfe' // 柱条颜色
                        // borderColor: '#3abbfe' // 柱条描边颜色
                        normal: {
                        // 渐变了
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                { offset: 0, color: '#00E4FF' },
                                { offset: 1, color: '#0039BB' }
                            ])
                        }
                    },
                    tooltip: {
                        valueFormatter: function(value) {
                            return value + 'mm'
                        }
                    },
                    data: jyData
                },

                {
                    name: '累计雨量(mm)',
                    type: 'line',
                    color: '#bb00ff',
                    yAxisIndex: 1,
                    tooltip: {
                        valueFormatter: function(value) {
                            return value + 'mm'
                        }
                    },
                    data: ljData
                }
                ]
            }
        },
      
    }
}
</script>
<style lang="less" scoped>
	.RainInfoBox {
		height: 100%;
		overflow-y: auto;
		overflow-x: hidden;
	}
	.rainInfo_top {
		height: 95px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;

		>div {
			box-sizing: border-box;
			width: 33.33%;
			// color: #5678aa;
            color: #fff;
			span {
				color: #fff;
			}
		}
        >div:nth-child(3n+2){
            width: 42%;
            text-indent: 30px;
        }
        >div:nth-child(3n){
            width: 24.67%;
            text-align: left;
        }
		.rainInfo_top_btn_span {
			span {
				background-color: #102065;
				color: #fff;
				border-color: #1e2f74;
			}
		}
	}

	.rainInfo_center {
		height:auto;
        max-height: 500px;
        // padding-bottom: 10px;

    .demoEccharts{
        height:100%;
    }
    .tableEchatrsdiv{
        height: 450px;
    }
    .tableEchatrs{
        height: 100% !important;
    }
	}

	.rainFlag {
		width: 70px;
		height: 70px;
		background: #0E5185;
		border-right: 0;
		color: #fff;
		font-size: 14px;
		margin-right: 1px;
		padding-top: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
	}

	/deep/ .rainLimitWrap {
		display: flex;
        // height: 80px;
	}
	/deep/ .rainLimitWrap .el-col:nth-child(1) {
		width: 27px;
		margin-left: 10px;
	}
    .flagTable{
      height: 140px;
    }
	/deep/ .villageWrap .el-table__footer tr .cell,
	/deep/ .rainLimitTableWrap .flagTable .el-table__body tr .cell {
		height: 15px;
		line-height: 15px;
	}

	/deep/ .el-table {
	  border:0 !important;
	}
	.rainLimitWrap .flagTable {
		display: inline-block;
	}

	/deep/ .rainLimitWrap .flagTable th,
	/deep/ .rainLimitTableWrap .flagTable th,
	.flagTableDiv {
		// background: #0a065a;
		color: #fff;
        border-bottom: 0 !important;
	}

	.flagTableDiv {
		width: 100%;
		height: 70px;
		overflow: hidden;
		border-right: 0;

		>div {
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:nth-child(1) {
				height: 35px;
				line-height: 35px;
                background-color: #0E5185;
			}

			&:nth-child(2) {
				height: 35px;
				line-height: 35px;
                background: rgba(0,100,178,0.05);
			}

			>span,
			>div {
				display: inline-block;
				width: 25%;
				text-align: center;

				>span {
					color: #fff;
					padding: 1px;
					margin: 0 5px;
				}
			}
		}
	}
    /deep/.el-table--border .el-table__cell{
        border-right: 0 none;
        border-bottom-color: #051E38 !important;
    }
	.mainTextLevel1 {
		background: #09a847;
	}

	.mainTextLevel2 {
		background: #0269ba;
	}

	.mainTextLevel3 {
		background: #CBCB1E;
	}

	.mainTextLevel4 {
		background: #febc1f;
	}

	.mainTextLevel5 {
		background: #fc2229;
	}

	.mainTextLevel6 {
		background: #6e339d;
	}

	.el-table--border::after {
		background-color: #14275b;
    }
     /deep/.zhadiobtn{
          .el-radio{
            display:inline-block;
            }

     }
</style>
<style lang="less" >
 .listTables{
     .el-table{
         th {
            .cell {
            color: #fff;
            }
         }
     }

 }
</style>

